import { cn } from '@/lib/utils';

interface AppIconProps {
  name: string;
  icon: string; // 可以是Font Awesome类名或SVG代码
  url: string;
  onEdit?: () => void;
  onDelete?: () => void;
  isEditable?: boolean;
}

export default function AppIcon({ name, icon, url, onEdit, onDelete, isEditable = false }: AppIconProps) {
  return (
    <div className="relative group">
      <a 
        href={url}
        className="flex flex-col items-center cursor-pointer transition-all duration-200 hover:scale-105"
        target="_blank"
        rel="noopener noreferrer"
      >
        <div className="w-16 h-16 rounded-xl bg-white dark:bg-gray-800 flex items-center justify-center shadow-sm mb-2 overflow-hidden group-hover:shadow-md transition-all duration-300 border border-gray-100 dark:border-gray-700">
          {icon.startsWith('<svg') ? (
    <div 
      className="w-full h-full flex items-center justify-center text-gray-700 dark:text-gray-300"
      dangerouslySetInnerHTML={{ __html: icon }}
    ></div>
          ) : (
            <div>
                <img src={icon} alt="网站图标" className="max-w-full max-h-full object-contain"></img>
            </div>
            
          )}
        </div>
        <span className="text-sm text-gray-700 dark:text-gray-300 truncate w-16 text-center">{name}</span>
      </a>
      
      {/* 编辑和删除按钮 - 仅在可编辑且悬停时显示 */}
      {isEditable && (
        <div className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity flex space-x-1 mt-1">
          <button
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              if (onEdit) onEdit();
            }}
            className="w-6 h-6 rounded-full bg-white/90 dark:bg-gray-800/90 flex items-center justify-center shadow-md text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 text-xs"
            aria-label="编辑"
          >
            <i className="fa-solid fa-pen"></i>
          </button>
          <button
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              if (onDelete) onDelete();
            }}
            className="w-6 h-6 rounded-full bg-white/90 dark:bg-gray-800/90 flex items-center justify-center shadow-md text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 text-xs"
            aria-label="删除"
          >
            <i className="fa-solid fa-trash"></i>
          </button>
        </div>
      )}
    </div>
  );
}